<template>
  <div id="app">
    <div class="chatbox">
      <div class="chat-title">
        <div class="left"></div>
        <div class="center">{{currentSession.xm}}</div>
        <div class="right">
          <div class="win-ctrl min" title="最小化" @click="handleMinWindowClick"></div>
          <div class="win-ctrl max" v-show="!isMax" title="最大化" @click="handleMaxWindowClick"></div>
          <div class="win-ctrl restore" v-show="isMax" title="还原" @click="handleRestoreWindowClick"></div>
          <div class="win-ctrl close" title="关闭" @click="handleCloseWindowClick"></div>
        </div>
      </div>
      <div class="chat-container">
        <div class="session-list" :style="{width:`${sessionListWidth}px`}" ref="sessionListBox">
          <div class="session-item"
               :class="{active:currentIp===item.relationuserip}"
               v-for="(item,index) in sessionList"
               @click="setCurrentIp(item.relationuserip)">
            <avatar class="avatar" :src="item.tx" :online="item.zt==='online'"></avatar>
            <div class="session-info" :class="{showMsgAndTime:showMsgAndTime}">
              <div class="info">
                <div class="xm">{{item.xm}}</div>
                <div class="time">{{getTime(item.createtime)}}</div>
              </div>
              <div class="msg" v-html="getMsgText(item.msg)"></div>
            </div>
            <div class="del-btn" :class="{delbtnOnTop:delbtnOnTop,showMsgAndTime:showMsgAndTime}"
                 @click.stop="removeSession(item.relationuserip)"></div>
            <div class="unread" :class="{delbtnOnTop:delbtnOnTop,showMsgAndTime:showMsgAndTime}"
                 v-show="unreadCount[item.relationuserip]">
              {{unreadCount[item.relationuserip]>99?`99+`:unreadCount[item.relationuserip]}}
            </div>
          </div>
          <div class="resize-line" @mousedown="handleSessionLeftResize"></div>
        </div>
        <div class="session-box" :style="{width:`calc(100% - ${sessionListWidth}px)`}">
          <div class="top"></div>
          <div class="center" :style="{height:`calc(100% - 45px - ${sessionBoxBottomHeight}px)`}">
            <div class="message-list" ref="messageListBox">
              <message-item v-for="item in messageList"
                            :key="item.msgid+item.type"
                            :type="item.type"
                            :tx="item.type==='send'?mineInfo.tx:item.tx"
                            :msgtype="item.msgtype"
                            :msg="item.msg">
              </message-item>
            </div>
            <div class="resize-line" @mousedown="handleSessionBoxBottomResize"></div>
          </div>
          <div class="bottom" :style="{height:`${sessionBoxBottomHeight}px`}">
            <div class="toolbar">
              <div class="toolbar-item expression" @click="showExpressionBox"></div>
              <div class="toolbar-item capture" @click="screenShot"></div>
              <div class="toolbar-item sendImage" @click="sendImage"></div>
              <!--<div class="toolbar-item" v-for="i in 10"></div>-->
            </div>
            <v-textarea class="input-box"
                        ref="inputBox"
                        @keydown.enter="handleVTextareaEnterKeydown"
                        v-alwaysfocus
                        v-model="inputStr[currentIp]"></v-textarea>
            <div class="btn-box">
              <div class="btn messageClose" @click="removeSession(currentIp)">关闭</div>
              <div class="btn messageSend" @click="sendMsg">发送</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <expression-box
      @click="handleExpressionItemClick"
      class="expressionbox"
      ref="expressionBox"></expression-box>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'
  import MessageItem from '../../components/MessageItem'
  import VTextarea from '../../components/VTextarea'
  import Avatar from '../../components/Avatar'
  import ExpressionBox from '../../components/ExpressionBox'

  const commonUtil = require('../../util/commonUtil')
  const msgUtil = require('../../util/msgUtil')
  const uuid = require('uuid/v4')
  const fs = require('fs')
  const path = require('path')

  export default {
    name: 'chat-page',
    components: {Avatar, MessageItem, VTextarea, ExpressionBox},
    data () {
      return {
        win: null,
        isMax: false,
        focusTime: Date.now(),
        sessionListWidth: 0, // 190 // 80
        sessionBoxBottomHeight: 110, // min 110 max 330
        showMsgAndTime: false,
        delbtnOnTop: false,
        sendMsgWithoutCtrl: true,
        inputStr: {}
      }
    },
    directives: {
      alwaysfocus (el, binding) {
        if (el) el.focus()
      }
    },
    computed: {
      ...mapState({
        currentIp: state => state.currentIp,
        unreadCount: state => state.unreadCount
      }),
      ...mapGetters(['getUserInfoByUserip', 'sessionList', 'getMessageListByUserip']),
      messageList () {
        return this.getMessageListByUserip(this.currentIp)
      },
      currentSession () {
        return this.sessionList.find(item => item.relationuserip === this.currentIp) || {}
      },
      mineInfo () {
        return this.getUserInfoByUserip(commonUtil.getNetworkInfo().address)
      }
    },
    async created () {
      this.win = this.$electron.remote.getCurrentWindow()
      let size = myStorage.getItem('windowSize', {width: 500, height: 500})
      // this.sessionListWidth = myStorage.getItem('sessionListWidth', 60)
      this.sessionBoxBottomHeight = myStorage.getItem('sessionBoxBottomHeight', 110)
      this.win.setSize(size.width, size.height)
      // this.win.center()
    },
    mounted () {
      window.addEventListener('resize', () => {
        if (!this.isMax) {
          myStorage.setItem('windowSize', {
            width: window.outerWidth - this.sessionListWidth,
            height: window.outerHeight
          })
        }
      })
      // window.addEventListener('keydown', (ev) => {
      //   if (ev.key === 'Enter') {
      //     if ((this.sendMsgWithoutCtrl && !ev.ctrlKey) || (!this.sendMsgWithoutCtrl && ev.ctrlKey)) {
      //       ev.preventDefault()
      //       this.sendMsg()
      //     } else if (this.sendMsgWithoutCtrl) {
      //       // console.log('aaaaaaaaaaaaaaaaaa')
      //       // this.$refs.inputBox.insertHtml(`<div ><br ></div >`)
      //       // this.inputStr[this.currentIp] += `<div ><br ></div >`
      //     }
      //   }
      // })
      this.refreshWindow()
    },
    watch: {
      sessionListWidth () {
        this.showMsgAndTime = this.sessionListWidth >= 190
        this.delbtnOnTop = this.sessionListWidth < 80
      },
      'sessionList.length' () {
        this.refreshWindow()
      },
      currentIp (newVal, oldVal) {
        if (!this.inputStr.hasOwnProperty(this.currentIp)) {
          this.$set(this.inputStr, this.currentIp, '')
        }
        // if (this.win.isFocused()) {
        this.$store.dispatch('setUnreadCount', {action: 'clear', ip: this.currentIp})
        // }
        let tx = this.currentSession.tx
        if (!tx) return ''
        this.$electron.ipcRenderer.send('setChatBoxWindowIcon', tx)
      },
      messageList () {
        this.$nextTick(() => {
          let messageListBox = this.$refs.messageListBox
          messageListBox.scrollTop = messageListBox.scrollHeight
        })
      }
    },
    methods: {
      handleVTextareaEnterKeydown (ev) {
        // if (ev.ctrlKey) ev.preventDefault()
        if (ev.code && ((this.sendMsgWithoutCtrl && !ev.ctrlKey) || (!this.sendMsgWithoutCtrl && ev.ctrlKey))) {
          ev.preventDefault()
          this.sendMsg()
          // console.log('发送消息')
        } else if (ev.ctrlKey) {
          // console.log('按了ctrl的回车')
          let selection = getSelection()
          // console.log(getSelection().getRangeAt(0))

          let focusNode = selection.focusNode
          // console.dir(focusNode)
          // console.log(selection)
          if (focusNode.nodeName === '#text') {
            if (focusNode.length === selection.focusOffset) {
              // 最后
              this.$refs.inputBox.insertHtml(`<div ><br ></div >`)
            } else {
              this.$refs.inputBox.insertHtml(`<br >`)
            }
          } else if (focusNode.classList.contains('input-box')) {
            // console.log('输入框')
            if (!focusNode.firstElementChild) {
              // 还没有输入文字
              // console.log('还没有输入文字')
              this.$refs.inputBox.insertHtml(`<div ><br ></div >`)
              this.$refs.inputBox.insertHtml(`<div ><br ></div >`)
            } else if (focusNode.childElementCount === selection.focusOffset) {
              // console.log('只有一个节点')
              this.$refs.inputBox.insertHtml(`<div ><br ></div >`)
            } else {
              this.$refs.inputBox.insertHtml(`<br >`)
              focusNode.children[selection.focusOffset].scrollIntoView()
            }
          }

          // console.log(selection.focusNode, selection.focusOffset)

          // lastElementChild
          // this.$refs.inputBox.insertHtml(`<div ><br ></div >`)
        }
        // console.log('handleVTextareaKeydown', ev)
      },
      refreshWindow () {
        let size = myStorage.getItem('windowSize', {width: 500, height: 500})
        if (this.sessionList.length === 0) {
          this.setCurrentIp('')
          this.win.hide()
        } else if (this.sessionList.length === 1) {
          // 没有边那列
          // let bounds = this.win.getBounds()
          this.win.setMinimumSize(500, 500)
          this.win.setSize(size.width, size.height)
          this.sessionListWidth = 0
          if (!this.win.isVisible()) this.win.show()
        } else if (this.sessionList.length > 1) {
          // 有左边那列
          this.sessionListWidth = myStorage.getItem('sessionListWidth', 60)
          // let bounds = this.win.getBounds()
          this.win.setMinimumSize(500 + this.sessionListWidth, 500)
          this.win.setSize(size.width + this.sessionListWidth, size.height)
        }
      },
      getMsgText (msg = '') {
        return commonUtil.getMsgText(msg)
      },
      handleExpressionItemClick (expressionItem) {
        let html = `<img src="${expressionItem.src}" style="padding: 5px;height: 30px;width: 30px;box-sizing: border-box" ondragstart="return false">`

        this.$refs.inputBox.insertHtml(html)
        this.hideExpressionBox()
      },
      showExpressionBox () {
        let max = 225
        let title = 40
        let h = max
        let pos = commonUtil.getPos(event.target)
        let expressionBox = this.$refs.expressionBox.$el
        let y = 0

        if (pos.y - 10 - title > max) {
          h = max
          y = pos.y - h - 10
        } else {
          h = pos.y - 10 - title
          y = pos.y - h - 10
        }

        expressionBox.style.top = `${y}px`
        expressionBox.style.left = `${pos.x}px`
        expressionBox.style.height = `${h}px`
        expressionBox.style.visibility = 'visible'
        window.addEventListener('mousedown', this.hideExpressionBox)
        window.addEventListener('blur', this.hideExpressionBox)
      },
      screenShot () {
      },
      sendImage () {
        let res = this.$electron.remote.dialog.showOpenDialog(this.$electron.remote.getCurrentWindow(), {
          properties: ['multiSelections'],
          filters: [{
            name: '图片',
            extensions: ['png', 'jpeg', 'jpg', 'gif']
          }]
        })
        if (!res) return
        for (let i = 0; i < res.length; i++) {
          let imgPath = res[i]
          let extname = path.extname(imgPath).replace('.', '')
          let imgStr = fs.readFileSync(imgPath).toString('base64')
          let imgsrc = `data:image/${extname};base64,${imgStr}`
          let img = new Image()
          img.style.maxWidth = '100%'
          img.style.borderRadius = '3px'
          img.onload = () => {
            let msg = {
              msgid: uuid(),
              msg: img.outerHTML,
              relationuserip: this.currentIp,
              createtime: Date.now(),
              msgtype: 'text',
              type: 'send'
            }
            this.send(msg)
          }
          img.src = imgsrc
          // let html = `<img src="${imgsrc}" style="padding: 5px;height: 30px;width: 30px;box-sizing: border-box" ondragstart="return false">`
        }
      },
      hideExpressionBox () {
        window.removeEventListener('mousedown', this.hideExpressionBox)
        window.removeEventListener('blur', this.hideExpressionBox)
        let expressionBox = this.$refs.expressionBox.$el
        expressionBox.style.visibility = 'hidden'
      },
      async sendMsg () {
        if (!this.inputStr[this.currentIp]) return
        let msg = {
          msgid: uuid(),
          msg: this.inputStr[this.currentIp],
          relationuserip: this.currentIp,
          createtime: Date.now(),
          msgtype: 'text',
          type: 'send'
        }
        this.send(msg)
      },
      async send (msg) {
        if (!this.currentIp) return
        await msgUtil.addMsg(msg)
        this.$store.dispatch('addMessageList', msg)
        myStorage.setItem('communication', {
          action: 'sendMsg',
          data: {
            sendData: JSON.stringify({action: 'msg', data: msg}),
            sendIp: msg.relationuserip
          }
        })
        this.$set(this.inputStr, this.currentIp, '')
      },
      removeSession (userip) {
        this.$store.dispatch('removeSessionList', userip)
      },
      setCurrentIp (userip) {
        this.$store.dispatch('setCurrentIp', userip)
      },
      getTime (time) {
        return commonUtil.getTimeStr(time)
      },
      handleSessionLeftResize (evt) {
        let startW = this.sessionListWidth
        let bounds = this.win.getBounds()
        let startX = evt.screenX

        let mask = document.createElement('div')
        mask.style.position = 'fixed'
        mask.style.top = '0'
        mask.style.left = '0'
        mask.style.width = '100vw'
        mask.style.height = '100vh'
        mask.style.backgroundColor = 'rgba(0,0,0,0)'
        mask.style.cursor = 'e-resize'

        let min = 60
        let max = 245

        const move = (ev) => {
          let deltaX = ev.screenX - startX
          let w = startW + deltaX
          if (w < min) {
            w = min
          } else if (w > max) w = max

          this.sessionListWidth = w
          myStorage.setItem('sessionListWidth', w)
          this.win.setSize(bounds.width + w - startW, bounds.height)
          this.win.setMinimumSize(500 + w, 500)
        }
        const up = (ev) => {
          document.removeEventListener('mouseup', up)
          mask.parentElement.removeChild(mask)
        }
        document.addEventListener('mouseup', up)
        mask.addEventListener('mousemove', move)
        document.body.append(mask)
      },
      handleSessionBoxBottomResize (evt) {
        let startH = this.sessionBoxBottomHeight
        let startY = evt.screenY

        let mask = document.createElement('div')
        mask.style.position = 'fixed'
        mask.style.top = '0'
        mask.style.left = '0'
        mask.style.width = '100vw'
        mask.style.height = '100vh'
        mask.style.backgroundColor = 'rgba(0,0,0,0)'
        mask.style.cursor = 'n-resize'

        let min = 110
        let max = 330

        const move = (ev) => {
          let deltaY = ev.screenY - startY
          let h = startH - deltaY
          if (h < min) {
            h = min
          } else if (h > max) h = max

          this.sessionBoxBottomHeight = h
          myStorage.setItem('sessionBoxBottomHeight', h)
        }
        const up = (ev) => {
          document.removeEventListener('mouseup', up)
          mask.parentElement.removeChild(mask)
        }
        document.addEventListener('mouseup', up)
        mask.addEventListener('mousemove', move)
        document.body.append(mask)
      },
      handleMinWindowClick () {
        this.win.minimize()
      },
      handleMaxWindowClick () {
        this.win.maximize()
        this.isMax = true
      },
      handleRestoreWindowClick () {
        this.win.restore()
        this.isMax = false
      },
      handleCloseWindowClick () {
        this.win.close()
      }
    }
  }
</script>

<style>
  pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  html, body {
    margin: 0;
    padding: 0;
    cursor: default;
    user-select: none;
    height: 100vh;
    width: 100vw;
  }
</style>
<style lang="scss" scoped>
  /* CSS */
  #app {
    width: 100%;
    height: 100%;

    .chatbox {
      height: 100%;
      width: 100%;
      /*background: url("../../assets/bg.jpg") no-repeat center;*/
      .chat-title {
        height: 40px;
        width: 100%;
        background-color: #fedaac;
        position: relative;
        -webkit-app-region: drag;


        .left {
          position: absolute;
          left: 0;
        }

        .center {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          line-height: 40px;
        }

        .right {
          position: absolute;
          right: 0;
          height: 40px;
          font-size: 0;

          .win-ctrl {
            height: 40px;
            width: 40px;
            display: inline-block;
            /*background-color: #c3d9ff;*/
            -webkit-app-region: no-drag;
          }

          .min {
            background: url("../../assets/suoxiao.png") no-repeat center;
            background-size: 50%;

            &:hover {
              background: url("../../assets/suoxiao-1.png") no-repeat center;
              background-size: 50%;
            }
          }

          .max {
            background: url("../../assets/max.png") no-repeat center;
            background-size: 40%;

            &:hover {
              background: url("../../assets/fangda-1.png") no-repeat center;
              background-size: 40%;
            }
          }

          .restore {
            background: url("../../assets/restore.png") no-repeat center;
            background-size: 40%;

            &:hover {
              background: url("../../assets/max-1.png") no-repeat center;
              background-size: 40%;
            }
          }

          .close {
            background: url("../../assets/closeaj.png") no-repeat center;
            background-size: 50%;

            &:hover {
              background: url("../../assets/closeaj-1.png") no-repeat center;
              background-size: 50%;
            }
          }
        }
      }

      .chat-container {
        height: calc(100% - 40px);
        font-size: 0;

        .session-list {
          display: inline-block;
          width: 245px;
          height: 100%;
          position: relative;
          box-sizing: border-box;
          border-top: 2px solid #ccc;
          /*background-color: #79ff9d;*/
          vertical-align: top;
          background: #fedaac;
          overflow-x: hidden;
          overflow-y: auto;

          .session-item {
            height: 60px;
            width: 100%;
            position: relative;

            .avatar {
              display: inline-block;
              height: 60px;
              width: 60px;
              box-sizing: border-box;
              padding: 12px;

              &:hover {
                background: rgba(254, 218, 172, 0.5);
              }

              img {
                height: 100%;
                width: 100%;
                border-radius: 50%;
              }
            }

            .session-info {
              display: inline-block;
              width: calc(100% - 60px);
              height: 60px;
              vertical-align: top;
              overflow: hidden;

              .info {
                position: relative;
                height: 60px;
                overflow: hidden;
                vertical-align: top;

                .xm {
                  font-size: 15px;
                  line-height: 60px;
                  font-weight: bold;
                  width: calc(100% - 45px);
                  overflow: hidden;
                }

                .time {
                  position: absolute;
                  right: 0;
                  top: 0;
                  font-size: 14px;
                  display: none;
                }
              }

              .msg {
                font-size: 14px;
                height: 16px;
                display: none;
                width: calc(100% - 70px);
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              &.showMsgAndTime {
                .info {
                  height: 16px;
                  margin-top: 15px;

                  .xm {
                    line-height: unset;
                    width: calc(100% - 70px);
                  }

                  .time {
                    display: block;
                    margin-right: 10px;
                  }
                }

                .msg {
                  height: 16px;
                  width: calc(100% - 70px);
                  display: block;
                }
              }
            }

            .del-btn {
              position: absolute;
              width: 16px;
              height: 16px;
              border-radius: 50%;
              visibility: hidden;
              background: url("../../assets/close.png") no-repeat center rgba(0, 0, 0, .3);
              background-size: 80%;
              top: 50%;
              transform: translateY(-50%);
              right: 15px;

              &.delbtnOnTop {
                top: 7px;
                right: unset;
                left: 30px;
                transform: unset;
              }

              &.showMsgAndTime {
                top: calc(50% + 10px);
                /*transform: unset;*/
              }

              &:hover {
                background-color: rgba(255, 0, 0, .3);
              }
            }

            .unread {
              position: absolute;
              font-size: 14px;
              /*width: 16px;*/
              min-width: 12px;
              padding: 0 2px;
              height: 16px;
              background-color: red;
              text-align: center;
              line-height: 16px;
              color: #fff;
              border-radius: 8px;
              top: 50%;
              /*background-color: black;*/
              transform: translateY(-50%);
              right: 10px;


              &.delbtnOnTop {
                top: 7px;
                right: unset;
                left: 30px;
                transform: unset;
              }

              &.showMsgAndTime {
                top: calc(50% + 10px);
                /*transform: unset;*/
              }
            }

            &:hover {
              background: rgba(234, 200, 158, 1);
              /*border-left: 2px solid #af9676;*/
              /*box-sizing: border-box;*/

              .del-btn {
                visibility: visible;
              }

              .unread {
                visibility: hidden;
              }
            }

            &.active {
              background-color: rgba(234, 200, 158, 0.8);
              border-left: 2px solid #af9676;
              box-sizing: border-box;
            }
          }

          .resize-line {
            position: absolute;
            right: 0;
            top: 0;
            width: 5px;
            height: 100%;
            /*background-color: red;*/
            cursor: e-resize;
            box-sizing: border-box;
            border-right: 2px solid #ccc;
          }
        }

        .session-box {
          display: inline-block;
          width: calc(100% - 245px);
          height: 100%;
          background: #fff;

          .top {
            height: 45px;
            /*background-color: #2c3e50;*/
          }

          .center {
            /*background-color: #c3d9ff;*/
            position: relative;

            .message-list {
              height: 100%;
              width: 100%;
              overflow-y: auto;
              overflow-x: hidden;
              border-bottom: 1px solid #ccc;

              &::-webkit-scrollbar-thumb {
                background: #ddd !important;
                border-radius: 4px !important;
                /*display: none;*/
              }

              &::-webkit-scrollbar {
                width: 6px !important;
                height: 10px !important;
                border-radius: 3px !important;
              }
            }

            .resize-line {
              position: absolute;
              width: 100%;
              left: 0;
              bottom: 0;
              /*background-color: red;*/
              height: 5px;
              cursor: n-resize;
              box-sizing: border-box;
              /*border-bottom: 2px solid #ccc;*/
            }
          }

          .bottom {


            .toolbar {
              height: 35px;
              padding: 5px;
              box-sizing: border-box;
              /*background-color: #42b983;*/
              .toolbar-item {
                height: 15px;
                width: 15px;
                /*box-sizing: border-box;*/
                /*background-color: green;*/
                /*margin-top: 5px;*/
                display: inline-block;
                /*margin-left: 5px;*/
                /*margin-right: 5px;*/
                padding: 5px 10px;
                border-right: 1px solid #999;
                background-size: 20px;
                background-repeat: no-repeat;
                background-position: center;

                &:nth-last-child(1) {
                  border-right: none;
                }


                &.expression {
                  background-image: url("../../assets/expression.png");
                  /*background: url("../../assets/expression.png") no-repeat center;*/
                  /*background-size: 80%;*/

                  &:hover {
                    background-image: url("../../assets/expression-1.png");
                    /*background: url("../../assets/expression-1.png") no-repeat center;*/
                    /*background-size: 80%;*/
                  }
                }

                &.capture {
                  background-image: url("../../assets/screenShot.png");
                  /*background: url("../../assets/screenShot.png") no-repeat center;*/
                  /*background-size: 80%;*/

                  &:hover {
                    background-image: url("../../assets/screenShot-1.png");
                    /*background: url("../../assets/screenShot-1.png") no-repeat center;*/
                    /*background-size: 80%;*/
                  }
                }

                &.sendImage {
                  background-image: url("../../assets/pic.png");
                  /*background: url("../../assets/screenShot.png") no-repeat center;*/
                  /*background-size: 80%;*/

                  &:hover {
                    background-image: url("../../assets/pic-1.png");
                    /*background: url("../../assets/screenShot-1.png") no-repeat center;*/
                    /*background-size: 80%;*/
                  }
                }
              }
            }

            .input-box {
              height: calc(100% - 35px - 40px);
              /*background-color: #c3d9ff;*/
              font-size: 14px;
              cursor: auto;
              overflow-y: auto;
            }

            .btn-box {
              height: 40px;
              /*background-color: #42b983;*/
              text-align: right;

              .btn {
                width: 70px;
                height: 25px;
                /*background-color: #edf2f8;*/
                display: inline-block;
                line-height: 25px;
                font-size: 16px;
                text-align: center;
                margin: 10px 8px 0 0;
                border-radius: 3px;
                /*font-size: 14px;*/
                /*font-weight: bold;*/
                border: 1px solid #dddddd;
              }

              .messageSend {
                background-color: #f7c380;
              }

              .messageClose {
                background-color: #fff;
              }
            }
          }
        }
      }
    }

    .expressionbox {
      position: fixed;
      top: 0;
      left: 0;
      background-color: #c3d9ff;
      visibility: hidden;
    }
  }
</style>
